﻿<template>
	<div>
		<table style="width: 100%;height: 600px;">
			<tr>
				<td style="width: 50%;height: 50%;background-color: aqua;" @@click="data1.showtimes++">
					点击显示菜单
				</td>
				<td style="width: 30%;background-color: rgb(43, 226, 89);" @@contextmenu="SPContextmenu.show('demo1')">
					右键显示菜单
				</td>
			</tr>
			<tr>
				<td style="height: 30%;background-color: beige;" @@contextmenu="SPContextmenu.show('demo1')">
					右键显示菜单
				</td>
				<td style="background-color: cadetblue;" @@click="ev=>open(ev)">
					点击显示菜单
					<div @@contextmenu="ev=>open(ev)" style="background-color: aqua;">右键打开少一点的那个菜单</div>
				</td>
			</tr>
			<tr>
				<td style="height: 30%;background-color: rgb(110, 219, 59);"
					@@contextmenu="SPContextmenu.show('newmenu1')">					
					<button @@click="showDyMenu1">动态显示菜单1</button>
					<button @@click="showDyMenu2">动态显示菜单2</button>
					<button @@click="showDyMenu3">动态显示菜单3</button>
				</td>
				<td style="background-color: rgb(211, 236, 236);">
				</td>
			</tr>
		</table>

		<sp-contextmenu :pobj="data1"></sp-contextmenu>

		<sp-contextmenu :pobj="data2"></sp-contextmenu>
	</div>
</template>
<script>
    var menupobj = {
        showtimes: 0,
        menulist: [
            {
                icoName: "fa fa-android",
                fnHandler: function (arg) {
                    console.info(arg);
                },
                btnName: "选项1-1-1"
            }
        ]
    };
    module.exports = {
        name: 'mymenu',
        methods: {
            open(ev) {
                if (ev.target.tagName === 'TD') {
                    SPContextmenu.show('demo1');
                    return;
                }
                if (ev.target.tagName === 'DIV') {
                    SPContextmenu.show('demo2');
                    return;
                }
            },
            
            showDyMenu1() {
                SPContextmenu.show('newmenu1', this.data3);
            },
            showDyMenu2() {
                this.$set(this.dymenudata, 0, menupobj);// 才能监听

                SPContextmenu.show('newmenu2', this.dymenudata[0]);
            },
            showDyMenu3() {
                this.$set(this.dymenudata, 0, {
                    showtimes: 0,
                    menulist: [
                        {
                            icoName: "fa fa-android",
                            fnHandler: function (arg) {
                                console.info(arg);
                            },
                            btnName: "动态菜单3选项1-1-1"
                        }
                    ]
                });// 才能监听

                SPContextmenu.show('newmenu3', this.dymenudata[0]);
            }
        },
        data() {
            return {
                index: 0,
                dymenudata: [],
                data1: {
                    name: 'demo1',
                    showtimes: 0,
                    menulist: [
                        {
                            btnName: "选项1111111",
                            icoName: "fa fa-home fa-fw",
                            menulist: [
                                {
                                    icoName: "fa fa-adn",
                                    btnName: "选项1-1",
                                    menulist: [
                                        {
                                            icoName: "fa fa-file",
                                            menulist: [
                                                {
                                                    icoName: "fa fa-android",
                                                    fnHandler: function (arg) {
                                                        console.info(arg);
                                                    },
                                                    btnName: "选项1-1-1"
                                                },
                                                {
                                                    icoName: "fa fa-android",
                                                    fnHandler: function (arg) {
                                                        console.info(arg);
                                                    },
                                                    btnName: "选项1-1-2"
                                                },
                                                {
                                                    icoName: "fa fa-android",
                                                    fnHandler: function (arg) {
                                                        console.info(arg);
                                                    },
                                                    btnName: "选项1-1-3",
                                                    menulist: [
                                                        {
                                                            icoName: "fa fa-android",
                                                            fnHandler: function (arg) {
                                                                console.info(Vue);
                                                            },
                                                            btnName: "选项1-1-3-1"
                                                        },
                                                        {
                                                            icoName: "fa fa-android",
                                                            fnHandler: function (arg) {
                                                                console.info(arg);
                                                            },
                                                            btnName: "选项1-1-3-2"
                                                        },
                                                        {
                                                            icoName: "fa fa-android",
                                                            fnHandler: function (arg) {
                                                                console.info(arg);
                                                            },
                                                            btnName: "选项1-1-3-3"
                                                        },
                                                        {
                                                            icoName: "fa fa-android",
                                                            fnHandler: function (arg) {
                                                                console.info(arg);
                                                            },
                                                            btnName: "选项1-1-3-4"
                                                        },
                                                        {
                                                            icoName: "fa fa-android",
                                                            fnHandler: function (arg) {
                                                                console.info(arg);
                                                            },
                                                            btnName: "选项1-1-3-5"
                                                        },
                                                        {
                                                            icoName: "fa fa-android",
                                                            fnHandler: function (arg) {
                                                                console.info(arg);
                                                            },
                                                            btnName: "选项1-1-3-6"
                                                        },
                                                        {
                                                            icoName: "fa fa-android",
                                                            fnHandler: function (arg) {
                                                                console.info(arg);
                                                            },
                                                            btnName: "选项1-1-3-7"
                                                        }
                                                    ]
                                                }
                                            ],
                                            btnName: "选项1-1-1"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            btnName: "选项2",
                            menulist: [
                                {
                                    fnHandler: function (arg) {
                                        console.info(arg);
                                    },
                                    btnName: "选项2-1"
                                }
                            ]
                        },
                        {
                            btnName: "选项3",
                            fnHandler: function (arg) {
                                console.info(arg);
                            },
                        },
                        {
                            btnName: "选项4",
                            disabled: true
                        }
                    ]
                },
                data2: {
                    name: 'demo2',
                    showtimes: 0,
                    menulist: [
                        {
                            btnName: "选项1",
                            icoName: "fa fa-home fa-fw",
                            menulist: [
                                {
                                    icoName: "fa fa-adn",
                                    btnName: "选项1-1",
                                    menulist: [
                                        {
                                            icoName: "fa fa-file",
                                            menulist: [
                                                {
                                                    icoName: "fa fa-android",
                                                    fnHandler: function (arg) {
                                                        console.info(arg);
                                                    },
                                                    btnName: "选项1-1-1",
                                                    disabled: false
                                                }
                                            ],
                                            btnName: "选项1-1-1",
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }, data3: {
                    showtimes: 0,
                    menulist: [
                        {
                            btnName: "动态菜单选项1",
                            icoName: "fa fa-home fa-fw",
                            menulist: [
                                {
                                    icoName: "fa fa-adn",
                                    btnName: "选项1-1",
                                    menulist: [
                                        {
                                            icoName: "fa fa-file",
                                            menulist: [
                                                {
                                                    icoName: "fa fa-android",
                                                    fnHandler: function (arg) {
                                                        console.info(arg);
                                                    },
                                                    btnName: "选项1-1-1",
                                                    disabled: false
                                                }
                                            ],
                                            btnName: "选项1-1-1",
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }

            }
        }
    };
</script>
<style scoped>
 
</style>
